<template>
  <div>
    <!-- 返回按钮 -->
    <van-button type="default" icon="arrow-left" class="return" @click="$router.go(-1)">
    </van-button>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in swiper" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品介绍 -->
    <div class="list">
      <p>{{ basicInfo.name }}</p>
      <p class="p" style="fontsize: 12px; color: #ccc">
        <span style="color: red">低价￥{{ basicInfo.minPrice }}</span>
        <span>原价{{ basicInfo.originalPrice }}</span>
        <span>库存{{ basicInfo.stores }}</span>
      </p>
    </div>
    <van-tabs v-model="active">
      <van-tab title="商品介绍">
        <div v-html="content"></div>
      </van-tab>
      <van-tab title="商品评价"></van-tab>
    </van-tabs>
    <!-- 底部导航栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="$store.getters.nums" @click="$router.push('/cart')"/>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="show = true" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="id"
      :hide-stock="sku.hide_stock"
      @add-cart="addCart"
      @stepper-change="nums"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});
export default {
  data() {
    return {
      id: 0,
      swiper: [], //轮播图
      basicInfo: [], //商品介绍的数据
      content: [],
      active: "",
      show: false,
      sku: {
        tree: [],
        list: [],
        //默认价格（单位元）
        price: "1.00",
        //商品总库存
        stock_num: 227,
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img.yzcdn.cn/1.jpg",
      },
      num: 1,
    };
  },
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
  },
  mounted() {
    this.getdetail();
    console.log(this.$store.getters.nums)
  },
  methods: {
    getdetail() {
      this.$axios
        .post("https://api.it120.cc/small4/shop/goods/detail?id=" + this.id)
        .then((res) => {
          console.log(res);
          this.swiper = res.data.pics2;
          this.basicInfo = res.data.basicInfo;
          console.log(this.basicInfo.id)
          this.content = res.data.content;
          this.goods.picture = res.data.pics2[0]
          if (res.data.hasOwnProperty("properties")) {
            this.setsku(res.data);
          }
          this.id = res.data.properties[0].id
          console.log(this.id)
          //   console.log(this.content);
          this.$nextTick(() => {
            let imgs = document.getElementsByClassName("img-lazyload");
            for (let i = 0; i < imgs.length; i++) {
              imgs[i].style.width = "100%";
              imgs[i].style.height = "100%";
            }
          });
        });
    },
    setsku(v) {
      console.log(v);
      if (v.hasOwnProperty("properties")) {
        //如果有两条数据那么来一次判断即可push进去
        const arr = [];
        const list = [];
        console.log(list);
        var ss = [];
        //直接循环
        v.properties.forEach((item, key) => {
          ss.push(item.childsCurGoods);
        });
        console.log(ss);
        //第一次循环
        v.properties.forEach((item, k) => {
          arr.push({
            k: item.name,
            k_s: "p" + k,
            v: item.childsCurGoods,
          });
        });
        if (ss.length == 1) {
          for (let i = 0; i < ss[0].length; i++) {
            list.push({
              id: 33,
              p0: ss[0][i].id,
              price: 100, // 价格（单位分）
              stock_num: 110, // 当前 sku 组合对应的库存
            });
          }
        } else {
          //两个
          for (let i = 0; i < ss[0].length; i++) {
            for (let k = 0; k < ss[1].length; k++) {
              list.push({
                id: 33,
                //js底层有检测机制会自动检测如果值一样不会再次赋值
                p0: ss[0][i].id,
                p1: ss[1][k].id,
                price: 100, // 价格（单位分）
                stock_num: 110, // 当前 sku 组合对应的库存
              });
            }
          }
        }
        console.log(list); //  注意有多余数据 筛选完在添加
        this.sku.tree = arr;
        this.sku.list = list;
      }
    },
    // 添加购物车
    addCart(){

      if(this.$store.state.token == ''){
        this.$toast('请先登录')
        this.$router.push('/login')
      }else{
        this.$toast('添加成功')
        var obj = {
          id:this.id,
          price:this.basicInfo.minPrice,
          pic:this.goods.picture,
          name:this.basicInfo.name,
          num:this.num,
          checked:true,
        }
        console.log(obj)
        this.$store.commit('add',obj);
        this.$toast.success('加入购物车成功');
        this.show = false;
      }
    },
    // 数量
    nums(n){
      this.num = n;
    }
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.list {
  width: 100%;
  padding: 5px;
  .p {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.return {
  border-radius: 55%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.8);
}
</style>
